<template>
  <div class="rili_attr-wrapper">
    <div  class="ui menu attached tabular top attr" :class="field.name">
      <a href="javascript:;" @click.stop.prevent='current_ind=ind' :class="{active:ind==current_ind}" class="item" :data-tab="'item_'+ind"
         v-for="(g,ind) in group">
        {{g.title}}
        <i title="编辑" @click.stop.prevent="editAttr(g)" class="ui icon edit"></i>

      </a>
      <div class="right menu" v-if="modelInfo.riliDayMid==55">
        <a class="item" @click.stop.prevent="addAttr">
          <i class="add icon" ></i> 添加规格
        </a>
      </div>
      <!--<input type="radio" :value="g.val" v-model="tabRadio">&nbsp;-->
    </div>

    <div v-if="group.length>0" class="ui bottom attached tab segment" :class="{active:ind==current_ind}" :data-tab="'item_'+ind" v-for="(g,ind) in group">
      <rili :product_id="g.val" :ol="ols[g.val]" :fieldNames="fieldNames" @setRili="setRili" :field="field" :modelInfo="modelInfo"></rili>

    </div>

  </div>
</template>

<script type="text/ecmascript-6">
  import tool from 'src/util/tool';
  import util from '_util/index';
  import _ from 'lodash';

  import RP from 'src/util/common/attr_rili';

  import rili from 'components/field/rili/rili'

  const store = util.store

  export default {
    data() {
      return {
        val: '',
        dataAll: null,
        tabRadio: null,
        current_ind: 0,

      }
    },
    components: {rili},
    methods: {
      editAttr(g){
        g = _.merge(this.attr_data[this.product_id], g);
        let copyG=util.deepCopy(g);
        this.$emit('editAttr', copyG);
      },
      addAttr(){
        this.$emit('addAttr');
      },
      setRili(rili,product_id){
        this.$emit('setAttrRili',rili,product_id)
      }
    },
    watch: {
    },
    computed: {
      selector(){
        return `.menu.attr.${this.field.name}>.item`;
      },
    },
    props: ['field','product_id','fieldNames','modelInfo','ols','group','attr_data'],
    created() {
    },
    mounted() {
      this.$nextTick(()=> {
        $(this.selector).tab({
          history: true
        });
      });
    }
  };
</script>

<style rel="stylesheet/less" lang="less" scoped>
  @import "../../../common/style/mixin";
  .rili_attr-wrapper {
    .attr_icon()
  }
</style>
